@import "~taro-ui/dist/style/components/activity-indicator.scss";
@import '~taro-ui/dist/style/components/loading.scss';
@import "~taro-ui/dist/style/components/calendar.scss";
// @import "~taro-ui/dist/style/components/flex.scss";

.schedule-contanier {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: relative;
  background-color: rgb(255, 255, 255);

  .time_select {
    height: 64px;
    background-color: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px 0 30px;

    .time_view {
      font-size: 26px;
      color: #333333;
    }

    .time_type_select {
      display: flex;
      align-items: center;

      .time_select_type {
        color: #0099ff;
        font-size: 24px;
        margin-right: 6px;
      }

      .time_select_icon {
        width: 21px;
        height: 21px;
        background-image: url(../images/显示方式.svg);
        background-size: contain;
        background-repeat: no-repeat;
        // mask-image: url(../images/显示方式.svg);
        // mask-size: contain;
        // mask-repeat: no-repeat;
        // background-color: #0099ff;
      }
    }
  }

  .table-box {
    margin-top: 20px;
    flex: 1;
    // height: 0;
    // overflow-y: scroll;
    // background-color: red;
    margin-bottom: 68px;
  }

  .calendar_view{
    flex: 1;
    overflow: auto;
  }

  .days-option {
    min-height: 192px;
    min-height: 176px;
    // min-height: 86px;//适配pad
    background-color: #ffffff;
    padding: 0 30px;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    display: inline-table;

    .days-select {
      padding-top: 14px;

      // height: 92px;
      // background-color: red;
      .calendar {
        .react-h5-calendar .calendar-body {
          height: 360px;
        }

        .react-h5-calendar .calendar-body.week-mode {
          height: 72px;
          // height: 36px;//适配pad
        }

        .react-h5-calendar .calendar-body .month-cell .day-cell {
          height: 72px;
        }

        .react-h5-calendar .calendar-body .month-cell .day-cell .day-text {
          line-height: 32px;
          font-size: 30px;
          width: 56px;
          height: 56px;

        }

        .react-h5-calendar .calendar-body .month-cell .day-cell .current-day {
          background: rgb(41, 151, 255);
          z-index: 1;
        }

        .react-h5-calendar .calendar-body .month-cell .day-cell .dot-mark {
          background-color: rgb(229, 229, 229) !important;
          width: 8px;
          height: 8px;
        }

        .react-h5-calendar .bottom-operate {
          height: 28px;
          margin-top: 2px;
          position: relative;
        }

        .react-h5-calendar .bottom-operate img,
        .react-h5-calendar .bottom-operate img.top {
          width: 90px;
          height: 4px;
          background: rgb(204, 204, 204);
        }
      }
    }

    .days-schedule {
      font-size: 20px;
      color: rgb(153, 153, 153);
      line-height: 48px;
      line-height: 36px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin-right: 20px;

      .days-schedule-all {
        background-color: #ffffff;
        margin-right: 22px;
      }

      .days-schedule-item {
        margin-bottom: 12px;
        flex: 1;
        background-color: rgb(231, 252, 229);
        font-size: 24px;
        color: rgb(56, 135, 53);
        padding-left: 8px;
        padding-right: 8px;

        .days-schedule-text {
          padding-right: 16px;
          width: 30px;
          // white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          // background-color: red;

        }
      }
    }
  }

  .index {
    flex: 1;
    color: #ffffff;

    .edit {
      background-color: #009cff;
    }

    .del {
      background-color: #e75d58;
    }
  }

  .create-shadow {
    width: 80px;
    height: 16px;
    border-radius: 60%;
    background-color: rgba($color: #3698fc, $alpha: 0.15);
    background-color: rgba($color: #3698fc, $alpha: 0.5);
    z-index: 1;
    position: fixed;
    right: 58px;
    bottom: 118px;
    bottom: 115px;
    filter: blur(5px);
    /* 添加模糊效果，可以根据需要调整模糊程度 */
  }

  .create-schedule-button {
    width: 88px;
    height: 88px;
    // width: 44px; //适配pad
    // height: 44px;//适配pad
    position: fixed;
    z-index: 5;
    right: 54px;
    bottom: 118px;
    background-color: rgb(54, 152, 252);
    border-radius: 50%;
    // box-shadow: 0px 5px 20px 0px rgba(54, 152, 252, 0.5);
  }

  .create-schedule-button::before {
    content: "";
    width: 48px;
    height: 6px;
    // width: 24px;//适配pad
    // height: 3px;//适配pad
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-color: white;
    border-radius: 6px;
    display: block;
  }

  .create-schedule-button::after {
    content: "";
    width: 6px;
    height: 48px;
    // width: 3px;//适配pad
    // height: 24px;//适配pad
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-color: white;
    border-radius: 6px;
    display: block;
  }

  .popLayer_Content {
    padding-top: 100px;
    .popLayer_title {
      font-size: 32px;
      line-height: 45px;
      letter-spacing: 0px;
      color: #050505;
    }

    .popLayer_icon {
      width: 27px;
      height: 28px;

      .popLayer_show_close::before {
        color: #c4c4c4;
      }
    }

    .time_list_view {
      position: relative;

      .back_today {
        position: fixed;
        top: 30px;
        right: 80px;
        color: #0099ff;
        font-size: 28px;
        border-right: 1px solid #ebebeb;
        padding-right: 30px;
      }

      .time_list_item {
        margin: 0 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 98px;
        border-bottom: 1px solid #d9d9d9;

        &:last-child {
          border-bottom: none;
        }

        .time_item_name{
          font-size: 32px;
          color: #333333;
        }

        .time_item_icon{
          width: 31px;
          height: 32px;
        }

        .item_check_icon{
          background-image: url(../images/check.jpg);
          background-size: contain;
          background-repeat: no-repeat;
        }
      }
    }

    .time_list_popLayer_title {
      height: 100px;
    }

  }

}
